<template>
  <n-drawer class="member-register" v-model:show="active" width="70%">
    <n-drawer-content body-style="--n-body-padding:0" closable>
      <template #header>
        <div class="my-title--primary">注册会员</div>
      </template>
      <div class="r-select">
        <p class="r-select-title">选择会员</p>
        <div class="r-select-radio">
          <div class="r-select-radio-item" :class="{'r-select-radio-item--active': memberType === 1}">
            <div class="r-select-radio-item--active_icon iconfont icon-queding"></div>
            至尊会员
          </div>
        </div>
      </div>
      <div class="r-content">
        <div class="r-content_cell r-content_cell--require">
          <div class="r-content_cell-label">会员姓名</div>
          <div class="r-content_cell-value">
            <input class="r-content_cell-value_input" placeholder="请输入姓名">
          </div>
        </div>
        <div class="r-content_cell r-content_cell--require">
          <div class="r-content_cell-label">会员电话</div>
          <div class="r-content_cell-value">
            <input class="r-content_cell-value_input" placeholder="请输入11位号码">
          </div>
        </div>
        <div class="r-content_cell">
          <div class="r-content_cell-label">身份证号</div>
          <div class="r-content_cell-value">
            <input class="r-content_cell-value_input" placeholder="请输入身份证号">
          </div>
        </div>
        <div class="r-content_cell">
          <div class="r-content_cell-label">性别</div>
          <div class="r-content_cell-value r-content_cell-value_radio">
            <div class="r-content_cell-value_radio-item" :class="{'r-content_cell-value_radio-item--active' : sex === 1}">
              <div class="r-content_cell-value_radio-item--active_icon iconfont icon-queding"></div>
              男
            </div>
            <div class="r-content_cell-value_radio-item" :class="{'r-content_cell-value_radio-item--active' : sex === 2}">
              <div class="r-content_cell-value_radio-item--active_icon iconfont icon-queding"></div>
              女
            </div>
          </div>
        </div>
        <div class="r-content_cell">
          <div class="r-content_cell-label">生日时间</div>
          <div class="r-content_cell-value r-content_cell-value_birthday">
            <n-date-picker v-model:value="timestamp" type="date" size="large" clearable />
          </div>
        </div>
        <div class="r-content_cell">
          <div class="r-content_cell-label">地址</div>
          <div class="r-content_cell-value">
            <textarea class="r-content_cell-value_textarea" rows="2" cols="30" placeholder="请输入地址"></textarea>
          </div>
        </div>
        <div class="r-content_cell">
          <div class="r-content_cell-label">登录密码</div>
          <div class="r-content_cell-value">
            <input class="r-content_cell-value_input" placeholder="123456">
          </div>
        </div>
        <div class="r-content_cell">
          <div class="r-content_cell-label">备注</div>
          <div class="r-content_cell-value">
            <textarea class="r-content_cell-value_textarea" rows="2" cols="30" placeholder="请输入"></textarea>
          </div>
        </div>
      </div>
      <div class="r-tip">默认密码为【123456】</div>
      <template #footer>
        <div class="r-footer">
          <div class="my-btn--primary">确认注册</div>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
  import {
    ref,
    inject
  } from "vue";
  const active = inject('registerDrawerActive')

  let memberType = ref(1);
  let sex = ref(1);
  let timestamp = ref(Date.now());
</script>

<style lang="less">
  .member-register {

    .r-select {
      padding: 20px;

      &-title {
        height: 25px;
        margin-bottom: 30px;
        font-size: 26px;
        font-weight: 500;
        color: #4A5060;
      }

      &-radio {
        display: flex;
        align-items: center;

        &-item {
          width: 148px;
          height: 60px;
          margin-right: 10px;
          font-size: 24px;
          font-weight: 500;
          text-align: center;
          line-height: 60px;
          background: #F8F8F8;
          border: 1px solid #E5E5E5;
          border-radius: 5px;

          &--active {
            position: relative;
            background: #E6F2FF;
            border: 1px solid #1981F4;

            &::after {
              position: absolute;
              top: 0;
              right: 0;
              content: "";
              width: 0;
              height: 0;
              border-top: 30px solid #1981F4;
              border-left: 30px solid transparent;
            }

            &_icon {
              position: absolute;
              top: -20px;
              right: 0;
              z-index: 99;
              font-size: 18px;
              color: #FFF;
            }
          }
        }
      }
    }

    .r-content {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;

      &_cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 605px;
        height: 120px;
        border-bottom: 1px solid #E5E5E5;

        &:nth-child(2n-1) {
          margin-right: 30px;
        }

        &-label {
          font-size: 26px;
          font-weight: 500;
          color: #4A5060;
        }

        &-value {
          &_input {
            width: 449px;
            font-size: 26px;
            font-weight: 500;
            color: #4A5060;
            text-align: right;

            &::placeholder {
              color: #999;
            }
          }

          &_textarea {
            width: 450px;
            padding-top: 40px;
            font-size: 26px;
            font-weight: 500;
            color: #4A5060;
            text-align: right;
            resize:none;
            &::placeholder {
              color: #999;
            }
          }
        }

        &-value_radio {
          display: flex;
          align-items: center;

          &-item {
            width: 88px;
            height: 60px;
            margin-left: 20px;
            font-size: 26px;
            font-weight: 500;
            text-align: center;
            line-height: 60px;
            background: #F8F8F8;
            border: 1px solid #E5E5E5;
            border-radius: 5px;

            &--active {
              position: relative;
              background: #E6F2FF;
              border: 1px solid #1981F4;

              &::after {
                position: absolute;
                top: 0;
                right: 0;
                content: "";
                width: 0;
                height: 0;
                border-top: 30px solid #1981F4;
                border-left: 30px solid transparent;
              }

              &_icon {
                position: absolute;
                top: -20px;
                right: 0;
                z-index: 99;
                font-size: 18px;
                color: #FFF;
              }
            }
          }
        }
      }

      &_cell--require {
        position: relative;

        &::before {
          position: absolute;
          top: 40%;
          left: -15px;
          content: "*";
          color: #EC3F14;
        }
      }
    }

    .r-tip {
      padding: 0px 20px;
      font-size: 20px;
      font-weight: 500;
      color: #fe9900;
    }

    .r-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
</style>